<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BoxplotChart Component Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        body {
            padding: 2rem;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .demo-section {
            margin-bottom: 3rem;
        }
        .demo-section h2 {
            margin-bottom: 1rem;
            color: #374151;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        @media (max-width: 768px) {
            .demo-grid {
                grid-template-columns: 1fr;
            }
        }
        .code-block {
            background: #f3f4f6;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            overflow-x: auto;
        }
        .code-block code {
            font-size: 0.875rem;
            color: #1f2937;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>BoxplotChart Component Demonstration</h1>
        <p>Boxplot charts visualize data distribution showing minimum, Q1, median, Q3, maximum, and outliers.</p>

        <hr>

        <!-- Demo 1: API Performance Distribution -->
        <div class="demo-section">
            <h2>1. API Performance Distribution</h2>
            <p>Compares response times across different API endpoints.</p>

            <div class="code-block">
                <code>&lt;div data-svelte-component="BoxplotChart"
     data-title="API Response Time Distribution"
     data-unit="ms"
     data-data='{...}'&gt;
&lt;/div&gt;</code>
            </div>

            <div
                data-svelte-component="BoxplotChart"
                data-title="API Response Time Distribution"
                data-unit="Response Time (ms)"
                data-height="400"
                data-data='{
                    "categories": ["/api/projects", "/api/users", "/api/statistics", "/api/trends", "/api/alarms"],
                    "boxplotData": [
                        [45, 52, 68, 85, 120],
                        [30, 38, 45, 55, 78],
                        [120, 145, 180, 220, 280],
                        [95, 110, 135, 165, 210],
                        [25, 32, 40, 50, 65]
                    ],
                    "outliers": [
                        [0, 250],
                        [2, 450],
                        [2, 380],
                        [3, 320]
                    ]
                }'
            ></div>
        </div>

        <hr>

        <!-- Demo 2: Temperature Readings -->
        <div class="demo-section">
            <h2>2. Device Temperature Readings (24h)</h2>
            <p>Shows temperature distribution for 5 IoT devices over the past 24 hours.</p>

            <div
                data-svelte-component="BoxplotChart"
                data-title="Device Temperature Distribution (24h)"
                data-unit="Temperature (°C)"
                data-height="350"
                data-data='{
                    "categories": ["Device A", "Device B", "Device C", "Device D", "Device E"],
                    "boxplotData": [
                        [18.5, 20.2, 22.1, 24.3, 26.8],
                        [19.0, 21.5, 23.2, 25.1, 27.5],
                        [17.2, 19.8, 21.5, 23.7, 26.2],
                        [20.1, 22.3, 24.0, 26.5, 29.1],
                        [18.0, 20.0, 21.8, 23.5, 25.5]
                    ],
                    "outliers": [
                        [1, 32.5],
                        [3, 35.2],
                        [3, 15.8]
                    ]
                }'
            ></div>
        </div>

        <hr>

        <!-- Demo 3: Small Charts Grid -->
        <div class="demo-section">
            <h2>3. Multiple Small Boxplots</h2>
            <p>Grid layout with smaller boxplot charts.</p>

            <div class="demo-grid">
                <div
                    data-svelte-component="BoxplotChart"
                    data-title="CPU Usage (%)"
                    data-unit="%"
                    data-height="280"
                    data-data='{
                        "categories": ["Server 1", "Server 2", "Server 3"],
                        "boxplotData": [
                            [25, 35, 45, 60, 80],
                            [30, 40, 50, 65, 85],
                            [20, 30, 42, 55, 75]
                        ],
                        "outliers": [[1, 95], [2, 92]]
                    }'
                ></div>

                <div
                    data-svelte-component="BoxplotChart"
                    data-title="Memory Usage (GB)"
                    data-unit="GB"
                    data-height="280"
                    data-data='{
                        "categories": ["Server 1", "Server 2", "Server 3"],
                        "boxplotData": [
                            [2.1, 3.5, 4.8, 6.2, 8.5],
                            [3.0, 4.2, 5.5, 7.0, 9.2],
                            [1.8, 2.9, 4.0, 5.5, 7.8]
                        ],
                        "outliers": [[0, 12.5]]
                    }'
                ></div>

                <div
                    data-svelte-component="BoxplotChart"
                    data-title="Network Latency (ms)"
                    data-unit="ms"
                    data-height="280"
                    data-data='{
                        "categories": ["Region A", "Region B", "Region C"],
                        "boxplotData": [
                            [5, 8, 12, 18, 25],
                            [15, 22, 30, 42, 58],
                            [8, 12, 18, 28, 38]
                        ],
                        "outliers": [[0, 85], [1, 120]]
                    }'
                ></div>

                <div
                    data-svelte-component="BoxplotChart"
                    data-title="Request Count (per min)"
                    data-unit="requests/min"
                    data-height="280"
                    data-data='{
                        "categories": ["Endpoint A", "Endpoint B", "Endpoint C"],
                        "boxplotData": [
                            [120, 180, 250, 320, 450],
                            [50, 85, 120, 165, 220],
                            [200, 280, 350, 430, 580]
                        ],
                        "outliers": [[2, 850]]
                    }'
                ></div>
            </div>
        </div>

        <hr>

        <!-- Demo 4: Alternative Data Format -->
        <div class="demo-section">
            <h2>4. Alternative Data Format (xAxis + series)</h2>
            <p>Uses standard ECharts data format with xAxis and series configuration.</p>

            <div class="code-block">
                <code>&lt;div data-svelte-component="BoxplotChart"
     data-data='{
       "xAxis": {"data": [...]},
       "series": [{
         "type": "boxplot",
         "data": [...]
       }, {
         "type": "scatter",
         "data": [...]
       }]
     }'&gt;
&lt;/div&gt;</code>
            </div>

            <div
                data-svelte-component="BoxplotChart"
                data-title="Data Quality Scores"
                data-unit="Score (0-100)"
                data-height="350"
                data-data='{
                    "xAxis": {
                        "data": ["Accuracy", "Completeness", "Consistency", "Timeliness", "Validity"]
                    },
                    "series": [
                        {
                            "type": "boxplot",
                            "data": [
                                [75, 82, 88, 92, 98],
                                [68, 78, 85, 90, 96],
                                [70, 80, 87, 93, 97],
                                [65, 75, 82, 88, 94],
                                [72, 81, 89, 94, 99]
                            ]
                        },
                        {
                            "type": "scatter",
                            "data": [
                                [0, 60],
                                [1, 55],
                                [3, 52]
                            ]
                        }
                    ]
                }'
            ></div>
        </div>

        <hr>

        <!-- Demo 5: Simple Boxplot (No Outliers) -->
        <div class="demo-section">
            <h2>5. Simple Boxplot Without Outliers</h2>
            <p>Clean distribution without anomalies.</p>

            <div
                data-svelte-component="BoxplotChart"
                data-title="Monthly Sales Performance"
                data-unit="Revenue ($1000)"
                data-height="320"
                data-data='{
                    "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                    "boxplotData": [
                        [45, 52, 58, 65, 72],
                        [48, 55, 62, 68, 76],
                        [52, 60, 68, 75, 84],
                        [58, 66, 74, 82, 92],
                        [62, 70, 78, 86, 96],
                        [65, 73, 82, 90, 100]
                    ],
                    "outliers": []
                }'
            ></div>
        </div>

    </div>

    <!-- Global Toast Container -->
    <div data-svelte-component="ToastContainer"></div>

    <!-- Load Svelte Components -->
    <script type="module" src="/static/js/main.js"></script>
</body>
</html>
